<template>
  <div style="">
    <x-header title="我的订单" :left-options="{preventGoBack:true}" style="background-color: #33bb99;width:100%;position: fixed;top:0;z-index: 99;">
      <span slot="overwrite-left" @click="back" class="iconfont icon-shangyiyedanjiantou" style="color: #fff;font-size: 22px;"></span>
    </x-header>
    <tab :line-width="1" v-model="ort" style="position: fixed;width:100%;top:45px;z-index: 99;">
      <tab-item :selected="orderStatus==-1?true:false" @on-item-click="itemClick" >全部订单</tab-item>
      <tab-item :selected="orderStatus==0?true:false" @on-item-click="itemClick">待确认</tab-item>
      <tab-item :selected="orderStatus==1?true:false" @on-item-click="itemClick">待发货</tab-item>
      <tab-item :selected="orderStatus==2?true:false" @on-item-click="itemClick">已发货</tab-item>
      <tab-item :selected="orderStatus==3?true:false" @on-item-click="itemClick">已签收</tab-item>
      <tab-item @on-item-click="itemClick">取消交易中</tab-item>
      <tab-item @on-item-click="itemClick">交易取消</tab-item>
    </tab>
    <flexbox orient="vertical" class="order-nr" >
      <scroller lock-x height="89%" style="width: 100%" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
        <div class="box2">
          <flexbox-item v-for="(v,index) in record" :key="index" style="width:100%;"><div class="flex-demo">
            <div class="title" @click="toShop(v)"><span><i class="iconfont icon-dianpu"></i>{{v.supplyCompanyName}}</span><span class="time">{{v.create_time}}</span></div>
            <div class="order-text">
              <h5>订单号：{{v.order_no}}</h5>
              <div class="order-state">
                <span style="margin-right: 1rem;"><i class="iconfont icon-dingdan"></i>{{v.order_status | statusFilter}}</span>
                <span><i class="iconfont icon-dingdandaifukuan"></i>{{v.order_pay_status==0?'未付款':'已付款'}}</span>
              </div>
              <p><i class="iconfont icon-dizhi1"></i>{{v.province}}{{v.city}}{{v.area}}{{v.detail_address}}</p>
              <p :style="{color:v.remark?'#333':'#ccc'}"><i class="iconfont icon-beizhu"></i>{{v.remark?v.remark:'（暂无备注信息）'}}</p>
              <div class="pay">
                <span class="price"><i class="iconfont icon-zhifufangshi"></i>￥<span>{{(v.order_total*1*1).toFixed(2)}}</span></span>
                <span class="btn">
              <span v-if="v.order_status==0||v.order_status==1" @click="del(v)">取消交易</span>
              <span @click="detail(v)" style="background: #33bb99;">订单详情</span>
            </span>
              </div>
            </div>
          </div></flexbox-item>
          <div style="height:50px;"></div>
        </div>
      </scroller>
    </flexbox>
    <div v-transfer-dom>
      <popup v-model="isStore" height="100%" style="background: #fbf9fe">
        <vTitle page="2" @transferUser="back2"></vTitle>
        <vStore v-if="isStore" v-bind:text="text" v-bind:type="type"></vStore>
      </popup>
    </div>
    <toast v-model="showPositionValue" type="text" :time="800" is-show-mask :text="toastMsg" :position="position"></toast>
  </div>
</template>
<script>
  import { XHeader, Flexbox, FlexboxItem, Popup, Scroller } from 'vux'
  import vTitle from '../view1/Title'
  import vStore from '../view1/Store'
  export default {
    name:'',
    components: {
      XHeader, Flexbox, FlexboxItem, Popup, vTitle, vStore, Scroller
    },
    data () {
      return {
        getBarWidth: function (index) {
          return (index + 1) * 22 + 'px'
        },
        ort: 0,
        time: '',
        orderStatus: '',
        payStatus:'',
        purchasersCompanyName:'',
        record: [],
        addList: [], // 地址列表
        currentChooseId: '',
        isStore:false,
        start:1,
        pageSize: 0,
        totalPage: 0,
        totalRow: 0,

        showPositionValue: false, // Toast提示
        position: 'default',
        toastMsg: '',
      }
    },
    watch:{
      ort(newv){
        // console.log(newv);
        let str = '';
        if(newv===0) this.orderStatus = '';
        if(newv===1) this.orderStatus = '0';
        if(newv===2) this.orderStatus = '1';
        if(newv===3) this.orderStatus = '2';
        if(newv===4) this.orderStatus = '3';
        if(newv===5) this.orderStatus = '6';
        if(newv===6) this.orderStatus = '7';
        this.record = []
        this.start = 1
        this.getOrderList();
      },
    },
    filters: {
      statusFilter(value){
        let str = '';
        if(value==='0'){
          str = '待确认';
        }
        if(value==='1'){
          str = '待发货';
        }
        if(value==='2'){
          str = '已发货';
        }
        if(value==='3'){
          str = '已签收';
        }
        if(value==='4'){
          str = '退货中';
        }
        if(value==='5'){
          str = '已退货';
        }
        if(value==='6'){
          str = '取消交易中';
        }
        if(value==='7'){
          str = '已取消';
        }
        if(value==='8'){
          str = '退货待确认';
        }
        return str;
      },
    },
    methods:{
      // tab选项
      itemClick(index){
        this.orderStatus = index-1
        if(this.orderStatus<0) this.orderStatus = ''
        this.record = []
        this.start = 1
        this.getOrderList()
      },
      // scroll
      onScrollBottom () {
        if (this.onFetching) {
          // do nothing
        } else {
          this.onFetching = true
          setTimeout(() => {
            // this.bottomCount += 10
            this.start += 1
            this.getOrderList()
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
            this.onFetching = false
          }, 2000)
        }
      },
      // 信息提示
      msg(str){
        this.showPositionValue = true;
        this.position = 'middle';
        this.toastMsg = (str);
      },
      toShop(text){
        this.text = text
        this.type = 3
        this.isStore = true
      },
      back2(msg){
        this.isStore = msg
      },
      // 获取订单列表
      getOrderList(){
        this.$vux.loading.show();
        this.config1.post('/purchasers/app/order/findPage', {
          start: this.start,
          start_time: '',
          end_time: '',
          payStatus: this.payStatus,
          orderStatus: this.orderStatus>=0?this.orderStatus:'',
          purchasersCompanyName: this.purchasersCompanyName,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            $.each(res.data.page.list,(index,item)=>{
              this.record.push(item)
            })
            this.msg(res.data.message);
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 获取收货地址列表
      getAddList(){
        this.config1.get('/purchasers/app/order/getDefaultAddress', {}).then(res=>{
          if(res.data.code==='0'){
            this.addList = res.data.purchasersAddressList;
          }
        })
      },
      // 修改收货地址
      addressChange(v){
        this.$vux.loading.show();
        this.config1.get('/purchasers/app/order/changeAddress', {
          orderId: v.id,
          addressId: v.address_id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.msg(res.data.message);
            this.getOrderList(1);
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 取消订单
      del(v){
        console.log(v)
        let self = this;
        this.$vux.confirm.show({
          title: '取消理由',
          content: '<textarea class="weui-textarea cancelReason" cols="30" rows="5" placeholder="输入取消理由"></textarea>',
          onShow () {
            $('.cancelReason').val('');
          },
          onHide () {
          },
          onCancel () {
          },
          onConfirm () {
            let el = $('.cancelReason');
            if(!el.val().trim()) {el.focus();return;}
            self.$vux.loading.show();
            self.config1.get('/purchasers/app/order/cancelOrder', {
              orderId: v.id,
              remark: $.trim(el.val()),
            }).then(res=>{
              self.$vux.loading.hide();
              if(res.data.code==='0'){
                if(v.order_status==0){
                  self.msg(res.data.message);
                }else{
                  self.msg('已成功提交取消交易申请！');
                }
                self.getOrderList(1);
              }else{
                self.msg(this.config1.handleError(res.data));
              }
            })
          }
        });
      },
      // 查看详情
      detail(v){
        this.$router.push({path: '/project1/view3/order-detail', query: {orderid: v.id}});
      },
      back(){
        this.$router.push('/project1/view3/index');
      }
    },
    created(){
      console.log(this.$route.params.state)
      this.orderStatus = this.$route.params.state
    },
    mounted(){
      this.getOrderList(1);
      this.getAddList();
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .order-nr{
    height:100%;
    position: absolute;
    top:90px;
    bottom:100px;
    width: 100%;
  }
  .orderList{
    background: #eee;
    .orderItem{
      margin: 1rem 0;
      background: #fff;
    }
  }
  .flex-demo{
    width: 95%;
    margin:0.5rem auto;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 8px #bbbbbd;
    font-size:0.8rem;
    .title{
      display: flex;
      justify-content: space-between;
      line-height:2rem;
      padding:0 0.5rem;
      border-bottom:1px #33bb99 solid;
      span{
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        font-weight:700;
        .iconfont{
          color:#33bb99;
          font-weight: normal;
          font-size:1rem;
          padding-right:0.3rem;
        }
      }
      span.time{
        color: #999;
        font-size: 0.6rem;
        font-weight:normal;
      }
    }
    .order-text{
      padding:0.5rem;
      line-height:1.5rem;
      font-size:0.8rem;
      color:#333;
      h5{
        font-size:0.9rem;
      }
      .order-state{
        color:#ff0000;
        i{
          color:#33bb99;
          padding-right:0.2rem;
          font-size:1rem;
        }
      }
      p{
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        .iconfont{
          color:#33bb99;
          padding-right:0.2rem;
          font-size:1rem;
        }
      }
      .pay{
        display: flex;
        justify-content: space-between;
        .price{
          font-weight: 700;
          color:#ff0000;
          .iconfont{
            color:#33bb99;
            padding-right:0.2rem;
            font-size:1rem;
            font-weight: normal;
          }
          span{
            font-size:1.2rem;
          }
        }
        .btn{
          color: #fff;
          span{
            margin-left: 0.5rem;
            background: #ffc655;
            display: inline-block;
            line-height:1.5rem;
            padding:0 0.5rem;
            border-radius: 5px;
          }
        }
      }
    }
  }
</style>
